<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script>
	// 元素尺寸
	
	// 元素.clientWidth 内宽度  
	// 元素.clientHeight 内高度

	// 元素.offsetWidth 外宽度
	// 元素.offsetHeight 外高度
	
	// window.innerWidth  页面的宽度   ==> 包括滚动条
	// window.innerHeight 页面的高度
	
	//document.documentElement.clientWidth 页面的宽度 ==> 不包括滚动条
	//document.documentElement.；	页面的高度

	//页面的实际大小 比如: 页面 宽2000 高1500 (永远不变)
	//document.documentElement.scrollWidth  页面的实际宽度	 
	//document.documentElement.scrollHeight 页面的实际高度
	
	//滚动条移动的距离
	//document.documentElement.scrollLeft ==> 滚动条距左移动的距离
	//document.documentElement.scrollTop ==> 滚动条距上移动的距离

	//事件对象提供的位置方法
		//事件对象:
		//事件对象.offsetX 距离当前元素的左边距
		//事件对象.offsetY 距离当前元素的上边距
		
		//事件对象.clientX 距离可视区的左边距 
		//事件对象.clientY 距离可视区的上边距
		
		//事件对象.pageX 距离页面的左边距
		//事件对象.pageY 距离页面的上边距
	</script>
</body>
</html>